<template>
  <view class="set-options">
    <view class="switch-box-text">
      <view class="switch-title">是否开启默认项</view>
      <view class="switch-text">是否开启默认项</view>
    </view>
    <switch
      :checked="showData.checked"
      :color="color"
      @change="switchChange"
      :style="{ transform: `scale(${scale})` }"
    />
  </view>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";

export default defineComponent({
  name: "",
  props: {
    scale: {
      type: Number,
      default: 1,
    },
    color: {
      type: String,
      default: "#FFCC33",
    },

    showData: {
      type: Object,
      default: () => {
        return {
          title: "是否开启默认项",
          des: "选项描述信息",
          code: "1", //选项code
          checked: true,
        };
      },
    },
  },
  components: {},
  setup(props, ctx) {
    const data = reactive({});
    const switchChange = (e) => {
      const valueObj = {
        code: props.showData.code,
        value: e.detail.value,
      };
      console.log(valueObj);
      ctx.emit("switchChange", valueObj);
    };
    return {
      switchChange,
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
.set-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10rpx 20rpx;
  border-bottom: 1rpx solid #eee;
  .switch-box-text {
    // display: flex;
    .switch-text {
      font-size: 22rpx;
      font-weight: 300;
      color: #aaaaaa;
      font-weight: 400;
    }
  }
}
</style>
